<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 审核订单列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          	<div>
		<div class="checkline">
			<div class="lacheck">
				审核状态：
				<el-radio v-model="radio" label="1">全部</el-radio>
				<el-radio v-model="radio" label="2">已通过</el-radio>
				<el-radio v-model="radio" label="3">未通过</el-radio>
				<el-radio v-model="radio" label="4">未审核</el-radio>
			</div>
			<div class="btns">
				<el-button type="primary" icon="el-icon-search" @click="exportToExcel">导出Excel文档</el-button>
			</div>
		</div>
		<div class="list">
			<el-table :data="tableDatas.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" border>
				<el-table-column min-width="150px" prop="order_number" label="订单编号">
				</el-table-column>
				<el-table-column prop="company" label="单位">
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="type" label="客户级别">
				</el-table-column>
				<el-table-column  min-width="200px" prop="create_time" label="创建时间">
				</el-table-column>
				<el-table-column prop="product_name" label="产品类型">
				</el-table-column>
				<el-table-column prop="order_quantity" label="数量·张">
				</el-table-column>
				<el-table-column label="单位(元)">100
				</el-table-column>
				<el-table-column label="金额">
					<template slot-scope="scope">
				        {{ tableDatas[scope.$index] && tableDatas[scope.$index]['order_quantity']*100}} 
				    </template>
				</el-table-column>
				<el-table-column label="支付状态">
					<template slot-scope="scope">
					    {{tableDatas[scope.$index] && tableDatas[scope.$index]['pay_status']==1?'已支付':'未支付'}} 
					</template>
				</el-table-column>
				<el-table-column min-width="120px" label="审核状态">
					<template slot-scope="scope">
					    {{tableDatas[scope.$index] && tableDatas[scope.$index]['order_status']==1?'审核未通过':'未审核'}} 
					</template>
				</el-table-column>
				<el-table-column label="配送方式">
					<template slot-scope="scope">
					    {{tableDatas[scope.$index] && tableDatas[scope.$index]['online']==1?'线下':'线上'}} 
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[4,8]" :page-size="100" layout="total, sizes, prev, pager, next" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
        </div>
    </div>
</template>

<script>
	export default {
    name: 'dataStatistics',
		data() {
			return {
				radio: '1',
				tableData: [],
				currentPage: 1,
				pageSize: 4,
			}
		},
		computed:{
			tableDatas(){
				let datas = this.tableData
				if(this.tableData !== []){
					switch(this.radio){
						case "1":
							return datas;
							break;
						case "2":
							return datas.filter((item)=>item.order_status === 2);
							break;
						case "3":
							return datas.filter((item)=>item.order_status === 1);
							break;
						case "4":
							return datas.filter((item)=>item.order_status === 0);
							break;
						default:
							break;
					}
				}
			}
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val
			},
			handleCurrentChange(val) {
				this.currentPage = val
			},
			search(data) {
				this.axios.post("/api/findCardNumber", data)
					.then(res => {
						this.tableData = res.data.data
					})
			},
			loadData(url) {
				this.axios.get(url)
				.then(res=>{
					console.log(res)
					this.tableData = res.data.data
				})
			},
			exportToExcel() {
				//excel数据导出
				require.ensure([], () => {
					const { export_json_to_excel } = require('../../../assets/js/Export2Excel.js');
					const tHeader = ['订单编号', '单位', '姓名','客户级别','创建时间','产品类型','数量·张'];
					const filterVal = ['order_number', 'company', 'name', 'type','create_time','product_name','order_quantity'];
					const list = this.tableData;
					const data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, '审核订单列表');
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			}
		},
		mounted() {
			this.loadData("/api/getAllOrder")
		}
	}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/*  */
.search {
		padding: 20px 10px;
	}

	.search>span {
		margin-left: 30px;
	}

	.checkline {
		padding: 0px 40px;
	}

	.checkline::after {
		content: "";
		display: block;
		clear: both;
	}

	.checkline>div {
		display: inline-block;
	}

	.lacheck {
		display: inline-block;
		margin-left: 30px;
	}

	.btns {
		float: right;
	}

	.list {
		margin-top: 10px;
	}

	.block {
		display: flex;
		justify-content: center;
	}

	.as {
		width: 90%;
		margin-bottom: 10px;
		text-align: right;
	}
</style>
